<template>
  <!-- 盒模型 -->
  <div class="MenuList">
    <div class="card" v-for="item in list" :key="item.id" @click="itemClick(item.id)">
      <div class="image">
        <img v-lazy="item.picUrl || item.coverImgUrl" alt="" />
        <div class="playcount" v-if="item.playCount">
          <i class="iconfont icon-bofang"></i>
          <span>{{ item.playCount | countFormat }}</span>
        </div>
        <div class="btn"><i class="iconfont icon-bofang"></i></div>
      </div>
      <p class="name">{{ item.name }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ['list'],
  data() {
    return {};
  },
  computed: {},
  created() {},
  components: {},
  methods: {
    itemClick(id) {
      this.$emit('itemClick', id);
    },
  },
};
</script>

<style scoped lang='scss'>
.MenuList {
  display: grid;
  grid-template-columns: repeat(5,140px);
  grid-gap: 24px;
  // flex-wrap: wrap;
  // justify-content: space-between;
  .card {
    width: 140px;
    .image {
      position: relative;
      img {
        width: 100%;
        height: 140px;
        border-radius: 5px;
        vertical-align: middle;
        cursor: pointer;
      }
      .playcount {
        @include playCount;
        i {
          font-size: 12px;
        }
      }
      .btn {
        @include playLogo(7px);
        i {
          font-size: 17px;
          color: $themeColor;
        }
      }
      &:hover .btn {
        opacity: 1;
      }
    }
    .name {
      font-size: 14px;
      color: #303133;
      @include hidWord;
    }
  }
}
</style>